<template>
  <div>
    <card-box title="条件筛选布局" icon="icon-template_template">
      <div slot="card-content">
         <EditTable
          ref="editable"
          @handleSelect="handleSelect"
          @handleRowDblclick="handleRowDblclick"
        ></EditTable>
      </div>
    </card-box>
  </div>
</template>
<script>
import CardBox from "@/components/CardBox"
import EditTable from "@/components/EditTable"
export default {
  name: "tabletable",
  components: { CardBox, EditTable },
  data () {
    return {}
  },
  mounted () {
    this.getTableData();
  },
  methods:{
        getTableData () {
      var opt = {
        url: '/getTableData',
        params: { name: 'cc', pageSize: 5, pageIndex: 1, isOrderId: 'date', orderType: 'ascending' },
        Config: {
          type: 'multiple',
          isOrderId: "date",
          orderType: "ascending"
        }
      }
      var column = [
        { type: 'selection', width: '40' },
        { IndexID: "name", IndexName: "name", IndexText: "禁止编辑", Width: "150" },
        { IndexID: "address", IndexName: "address", IndexText: "文本框编辑", Width: "150", editRender: { name: 'ElInput' } },
        { IndexID: "date", IndexName: "date", IndexText: "日期", Width: "150", sortable: 'customer', editRender: { name: 'ElDatePicker', props: { type: 'date', format: 'yyyy-MM-dd' } } },
        { IndexID: "options", IndexName: "options", IndexText: "下拉", Width: "150", sortable: 'customer', editRender: { name: 'ElSelect', options: this.options } },
        { IndexID: "num", IndexName: "num", IndexText: "数值", Width: "550", editRender: { name: 'ElInputNumber' } },
        { IndexID: "ElSwitch", IndexName: "ElSwitch", IndexText: "开关", Width: "550", editRender: { name: 'ElSwitch', type: 'visible' } },
      ]

      this.$nextTick(() => {
        this.$refs.editable.SetColumn(column);//设置列属性
        this.$refs.editable.init(opt);//调用子组件初始化方法

      })
    },
        addColumn () {
      //新增一行
      console.log(this.$refs)
      this.$refs.editable.$refs.editable.insert();
    },
        //多选选中回调事件
    handleSelect (val) {
      console.log(val)
    },
    //当某一行被双击时会触发该事件
    handleRowDblclick (row, column, event) {
      console.log(row);
      console.log(column);
      console.log(event);
    },
  }
}
</script>